<template>
  <div class="boxLayout">
    <div class="liveBox">
      <p class="rightTie">喜欢这个歌单的人</p>
      <ul class="LiveUserAvatarUrlBox">
        <li v-for="item in liveUserList" :key="item.userId">
          <img :src="item.avatarUrl" class="headPortrait" />
        </li>
      </ul>
    </div>
    <div class="relevantBox">
      <p class="rightTie">相关推荐</p>
      <ul>
        <router-link
          tag="li"
          v-for="item in relevantList"
          :key="item.id"
          class="relevantItem"
          :to="{ name: 'songsheetdetail', query: { id: item.id } }"
        >
          <img :src="item.coverImgUrl" class="headPortraitTwo" alt="" />
          <div class="itemRightBox">
            <p class="title">{{ item.name }}</p>
            <p class="nickname">{{ item.creator.nickname }}</p>
          </div>
        </router-link>
      </ul>
    </div>
    <DownloadApp />
  </div>
</template>

<script>
import DownloadApp from "@/components/DownloadApp";
import { liveSongSheetUser, relevantSongSheet } from "@/api";
export default {
  data() {
    return {
      liveUserList: [],
      relevantList: [],
    };
  },
  components: {
    DownloadApp,
  },
  created() {
    this.getLiveUser();
    this.getRelevantSongSheet();
  },
  methods: {
    getLiveUser() {
      liveSongSheetUser({ id: this.$route.query.id, limit: 8 }).then((res) => {
        this.liveUserList = res.subscribers;
      });
    },
    getRelevantSongSheet() {
      relevantSongSheet({ id: this.$route.query.id }).then((res) => {
        console.log(res);
        this.relevantList = res.playlists;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.boxLayout {
  padding: 20px 40px 40px 30px;
  .rightTie {
    color: #333;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    font-weight: 700;
  }
  .headPortraitTwo {
    width: 50px;
    height: 50px;
    cursor: pointer;
  }

  .liveBox {
    .LiveUserAvatarUrlBox {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 25%;
        text-align: center;
        margin-bottom: 5px;
        .headPortrait {
          width: 40px;
          height: 40px;
          cursor: pointer;
        }
      }
    }
  }
  .relevantBox {
    margin: 25px 0;
    .relevantItem {
      display: flex;
      margin-top: 15px;
      .itemRightBox {
        margin-left: 10px;
        font-size: 14px;
        overflow: hidden;
        color: #000;
        .title {
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          line-height: 24px;
          text-overflow: ellipsis;
        }
        .nickname {
          color: #666;
          cursor: pointer;
          line-height: 24px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>